<template>
  <div class="pageDetail">
    <el-form
      ref="formRef"
      class="form_item_w2"
      :model="pageForm"
      :rules="rules"
      label-width="140px"
    >
      <el-form-item label="科研标题" prop="researchTitle">
        <el-input v-model="pageForm.researchTitle" placeholder="请输入科研标题" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="科研级别" prop="researchLevelId">
        <el-select v-model="pageForm.researchLevelId" placeholder="请选择科研级别" :disabled="disabled">
          <el-option 
            v-for="(dictItem,index) in project_level" 
            :label="dictItem.dictLabel" 
            :value="dictItem.dictCode"
            :key="index" 
            ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="科研类型" prop="researchTypeId">
        <el-select v-model="pageForm.researchTypeId" placeholder="请选择科研类型" :disabled="disabled">
          <el-option 
            v-for="(dictItem,index) in scientific_research_type" 
            :label="dictItem.dictLabel" 
            :value="dictItem.dictCode"
            :key="index" 
            ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="科研状态" prop="statusId">
        <el-select v-model="pageForm.statusId" placeholder="请选择科研状态" :disabled="disabled">
          <el-option 
            v-for="(dictItem,index) in scietific_research_status" 
            :label="dictItem.dictLabel" 
            :value="dictItem.dictCode"
            :key="index" 
            ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属学院">
        <TheDeptSelect v-model="pageForm.collageId" :modelValue="pageForm.collageId" :deptType="39" placeholder="请选择所属学院"  :disabled="disabled" @update:modelValue="pageForm.collageId = $event"/>
      </el-form-item>
      <el-form-item label="负责人" prop="principal">
        <el-input v-model="pageForm.principal" placeholder="请输入负责人" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="经费总额（万元）" prop="budget">
        <el-input-number v-model="pageForm.budget" :min="0" label="请输入经费总额" :disabled="disabled"></el-input-number>
      </el-form-item>
      <el-form-item label="承担单位">
        <el-input v-model="pageForm.organization" placeholder="请输入承担单位" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="学术获奖">
        <el-input v-model="pageForm.academicAwards" placeholder="请输入学术获奖" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="关联课程">
        <el-input v-model="pageForm.relatedCourse" placeholder="请输入关联课程" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="教学应用">
        <el-select v-model="pageForm.teachingApplicationId" placeholder="请选择教学应用" :disabled="disabled">
          <el-option 
            v-for="(dictItem,index) in teaching_application_type" 
            :label="dictItem.dictLabel" 
            :value="dictItem.dictCode"
            :key="index" 
            ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="startDate">
        <el-date-picker
          v-model="pageForm.startDate"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
          :disabled="disabled"
          >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endDate">
        <el-date-picker
          v-model="pageForm.endDate"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
          :disabled="disabled"
          >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="成果" prop="resultFileId" class="item_w1">
        <FileUpload v-model="pageForm.resultFileId" :fileInfo="pageForm.resultFileList" :disabled="disabled"/>
      </el-form-item>
    </el-form>
    <div class="pageFooterBtn">
      <el-button @click="$router.back()">返回</el-button>
      <el-button type="primary" @click="handleSubmit()" v-if="['add','edit'].includes(action)" :loading="loading">提交</el-button>
    </div>
  </div>
</template>
<script>
import { rules } from './data'
import { useDict } from '@/utils/dict/useDict'
import { scientificResearchAddApi, scientificResearchEditApi, scientificResearchByIdApi } from '@/api/scientificResearch'
import { listUser } from "@/api/system/user";
import FileUpload from "@/components/FileUpload";
import TheDeptSelect from '@/componentsView/TheDeptSelect.vue';

export default {
  name: 'ScientificResearchDetail',
  components: { TheDeptSelect, FileUpload },
  data() {
    return {
      rules,
      userName: "",
      userList: [],
      pageForm: {},
      loading:false,
      disabled:false,
      course_nature_type: useDict('course_nature_type'),
      project_level: useDict('project_level'),
      scientific_research_type: useDict('scientific_research_type'),
      teaching_application_type: useDict('teaching_application_type'),
      scietific_research_status: useDict('scietific_research_status'),
      researchId: this.$route.query.researchId,
      action: this.$route.query.action
    }
  },

  async created() {
    if (this.researchId) this.getCoursePlanById()
  },
  methods: {
    async handleSubmit() {
      const pureNumberRegex = /^[+-]?(\d+(\.\d*)?|\.\d+)$/;
      if (pureNumberRegex.test(this.pageForm.researchTitle)) {
        this.$message.error('科研标题不能为纯数字')
        return
      }
      try {
        await this.$refs.formRef.validate()
        this.loading = true
        let res = {}
        if (this.researchId) {
          delete this.pageForm.fileInfo
          res = await scientificResearchEditApi(this.pageForm)
        }else{
          res = await scientificResearchAddApi(this.pageForm)
        }
        if (res.code === 200) {
          this.$message.success(res.msg)
          this.$router.back()
        } else {
          this.$message.error(res.msg || '操作失败')
        }
      } catch (error) {
        this.$message.error('操作失败')
      } finally {
        this.loading = false
      }
    },

    async getCoursePlanById(){
      if (this.action === 'look') this.disabled = true
      scientificResearchByIdApi(this.researchId).then(res => {
        if (res.code === 200) {
          this.pageForm = res.data
          this.pageForm.researchTypeId = Number(res.data.researchTypeId)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    getUserList() {
      listUser({userName:this.userName,pageNum:1,pageSize:10}).then((response) => {
        if (response.code == 200) {
          this.userList = response.rows
        }else{
          this.$message.error(response.msg);
        }
      });
    },
    remoteMethod(val){
      this.userName = val;
      this.getUserList()
    }
  },
}
</script>
<style scoped lang="scss">
::v-deep .el-select {
	width: 100% !important;
}
::v-deep .el-date-editor{
  width: 100% !important;
}
::v-deep .el-input-number{
  width: 100% !important;
}
</style>